<template>
  <div class="mg-l-40 mg-t-20">
    <div style="font-size: 14px; font-weight: bold;">使用expandSlot插槽实现展示文本</div>
    <br />
    <e-table :columns="columns" :data="data">
      <template #expandSlot="{ row }">
        <e-table :columns="row.columns" :data="row.data">
          <template #status="{ row }">
            <span>
              <e-tag size="large" :color="row.status" dark>{{ row.statusLabel }}</e-tag>
            </span>
          </template>
          <template #action="{ index }">
            <div class="btn" @click="print(index)">按钮</div>
          </template>
        </e-table>
      </template>
      <template #status="{ row }">
        <span>
          <e-tag size="large" :color="row.status" dark>{{ row.statusLabel }}</e-tag>
        </span>
      </template>
    </e-table>
  </div>
</template>

<script setup>
const columns = [
  {
    type: 'expand',
    width: 50,
  },
  {
    title: '实例名称',
    key: 'name',
    resizable: true
  },
  {
    title: '状态',
    slot: 'status',
    resizable: true
  },
  {
    title: 'IP',
    key: 'ip',
    resizable: true
  },
  {
    title: '时间',
    key: 'time',
    resizable: true
  },
  {
    title: '地域',
    key: 'address',
    resizable: true
  },
]
const data = [
  {
    name: 'CPC-RP-TJ-01',
    status: 'success',
    statusLabel: '成功',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '上海',
    _expanded: true,
    columns: [
      {
        title: '实例名称',
        key: 'name',
        resizable: true
      },
      {
        title: '状态',
        slot: 'status',
        resizable: true
      },
      {
        title: 'CPU使用量（core)',
        key: 'cpu',
        resizable: true
      },
      {
        title: '内存（MIB）',
        key: 'memory',
        resizable: true
      },
      {
        title: '操作',
        slot: 'action',
        resizable: true
      },
    ],
    data: [
      {
        name: 'test-pod',
        status: 'primary',
        statusLabel: '进行中',
        cpu: '0.001',
        memory: '227',
      },
      {
        name: 'CPC-RP-TJ-01',
        status: 'warning',
        statusLabel: '告警',
        cpu: '123.11.234.2',
        memory: '2017-10-20',
      },
    ]

  },
  {
    name: 'CPC-RP-TJ-02',
    status: 'primary',
    statusLabel: '进行中',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '苏州',
    content: '苏州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-',
    _expanded: true,
  },
  {
    name: 'CPC-RP-TJ-03',
    status: 'warning',
    statusLabel: '告警',
    ip: '123.11.234.2',
    time: '2017-10-20',
    address: '广州',
    content: '广州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
  },
  {
    name: 'CPC-RP-TJ-04',
    status: 'primary',
    statusLabel: '进行中',
    ip: '123.11.234.21',
    time: '2017-10-20',
    address: '苏州',
    content: '苏州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
  },
  {
    name: 'CPC-RP-TJ-05',
    status: 'warning',
    statusLabel: '告警',
    ip: '123.11.234.22',
    time: '2017-10-20',
    address: '广州',
    content: '苏州移动云产品边缘智能云EIC2022年迈入国内云厂商第一阵营，欢迎大家试用 -_-'
  },
]

const print = (index) => {
  // 一些逻辑操作逻辑
  console.log('click:', index);
}
</script>

<style scoped>
.btn {
  color: #1A6AFF;
  cursor: pointer;
}
</style>